<template>
	<view>
		<!-- 耗材金额构成 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">耗材金额构成</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="consumables" id="consumables" @touchstart="touchColumn" @touchmove="moveLineA" class="charts-pie"
			 :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>

		<!-- 材料收入和收费材料趋势 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">材料收入和收费材料趋势</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="material" id="material" @touchstart="touchColumn" @touchmove="ChainRatioA" class="charts-pie"
			 :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>

		<!-- 医疗收入和不收费材料趋势 -->
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="qiun-title-dot-light">医疗收入和不收费材料趋势</view>
		</view>
		<view class="qiun-charts">
			<canvas canvas-id="medicalmaterials" id="medicalmaterials" @touchstart="touchColumnA" @touchmove="MedicalMove" class="charts-pie"
			 :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>
	</view>
</template>
<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	var _this;
	var AmountConsumables = null
	var Material = null
	var MedicalMaterials = null

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				ConsumablesList: {
					categories: ['2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11',
						'2019-12', '2020-01', '2020-02'
					],
					series: [{
						"name": "医疗消耗品",
						"data": [2032, 3020, 3021, 1021, 3265, 2354, 1625, 2345, 5210, 3524, 2153, 3421]
					}, {
						"name": "配件",
						"data": [2012, 1356, 2351, 3021, 1021, 3265, 2354, 1023, 3562, 3000, 1236, 2121]
					}, {
						"name": "各类纸张",
						"data": [1023, 3562, 3320, 2351, 1021, 1564, 2665, 6322, 4256, 3568, 2365, 5632]
					}, {
						"name": "医疗维修",
						"data": [2360, 1235, 2235, 2659, 3658, 4521, 3556, 5621, 1563, 1536, 1522, 4562]
					}, {
						"name": "后勤维修",
						"data": [0, 1356, 2235, 2156, 2665, 3645, 1563, 4521, 6554, 3556, 2556, 2555]
					}, {
						"name": "家具低值",
						"data": [1021, 1564, 2665, 3212, 6322, 4256, 3568, 3225, 1254, 3655, 2563, 2543]
					}, {
						"name": "工具低值",
						"data": [1239, 1485, 3569, 0, 6552, 1223, 3554, 1422, 2156, 2665, 3645, 1560]
					}, {
						"name": "五金",
						"data": [2356, 1650, 2325, 0, 2321, 6459, 3265, 5564, 4520, 3650, 2654, 2458]
					}, ]
				},
				MaterialList: {
					categories: ['2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11',
						'2019-12', '2020-01', '2020-02'
					],
					series: [{
						"name": "材料收入",
						"data": [12, 13, 10, 13, 3, 23, 23, 24, 13, 20, 15, 17]
					}, {
						"name": "收费材料",
						"data": [22, 18, 19, 23, 29, 33, 12, 26, 22, 15, 24, 36]
					}]
				},
				MedicalList: {
					categories: ['2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11',
						'2019-12', '2020-01', '2020-02'
					],
					series: [{
						"name": "医疗收入",
						"data": [12, 13, 10, 13, 3, 23, 23, 24, 13, 20, 15, 17]
					}, {
						"name": "不收费材料支出",
						"data": [22, 18, 19, 23, 29, 33, 12, 26, 22, 15, 24, 36]
					}]
				}
			}
		},
		onLoad() {
			_this = this;
			this.cWidth = uni.upx2px(750)
			this.cHeight = uni.upx2px(500)
			this.refreshList();
		},
		methods: {
			refreshList() {
				_this.CompositionConsumablesAmount("consumables", this.ConsumablesList)
				_this.MaterialChargeTrend("material", this.MaterialList)
				_this.MedicalMaterialsTrend("medicalmaterials", this.MedicalList)
			},
			// 耗材金额构成
			CompositionConsumablesAmount(canvasId, chartData) {
				AmountConsumables = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: true,
					fontSize: 11,
					dataLabel: false, // 隐藏数据点标签
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					animation: true,
					enableScroll: true, // 开启图表拖拽功能
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true, // 绘制Y坐标轴网格
						itemCount: 5, // x轴单屏显示数据的数量，默认为5个
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						//disabled:true
						// gridType: 'dash',
						// format: (val) => {
						// 	return val.toFixed(0) + '百万'
						// }
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						column: {
							type: 'stack',
							width: _this.cWidth * _this.pixelRatio * 0.5 / chartData.categories.length
						}
					}
				})
			},
			// 材料收入和收费材料趋势
			MaterialChargeTrend(canvasId, chartData) {
				Material = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					enableScroll: true, // 开启图表拖拽功能
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						itemCount: 5, // x轴单屏显示数据的数量，默认为5个
						dashLength: 8,
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: (val) => {
							return val.toFixed(0) + '万'
						}
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				})
			},
			// 医疗收入和不收费材料趋势
			MedicalMaterialsTrend(canvasId, chartData) {
				MedicalMaterials = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					enableScroll: true, // 开启图表拖拽功能
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						itemCount: 5, // x轴单屏显示数据的数量，默认为5个
						dashLength: 8,
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: (val) => {
							return val.toFixed(0) + '万'
						}
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				})
			},
			// 触摸
			touchColumn(e) {
				if (e.target.id === "consumables") {
					AmountConsumables.scrollStart(e)
					AmountConsumables.scrollEnd(e)
					AmountConsumables.showToolTip(e, {
						format: function(item, category) {
							if (typeof item.data === 'object') {
								return category + ' ' + item.name + ':' + item.data.value
							} else {
								return category + ' ' + item.name + ':' + item.data
							}
						}
					})
				} else if (e.target.id = "material") {
					Material.scrollStart(e)
					Material.scrollEnd(e)
					Material.showToolTip(e, {
						format: function(item, category) {
							if (typeof item.data === 'object') {
								return category + ' ' + item.name + ':' + item.data.value
							} else {
								return category + ' ' + item.name + ':' + item.data
							}
						}
					})
				}
			},
			touchColumnA(e) {
				// if (e.target.id = "medicalmaterials") {
				MedicalMaterials.scrollStart(e)
				MedicalMaterials.scrollEnd(e)
				MedicalMaterials.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				})
				// }
			},

			// 触摸移动
			moveLineA(e) {
				AmountConsumables.scroll(e)
			},
			ChainRatioA(e) {
				Material.scroll(e)
			},
			MedicalMove(e) {
				MedicalMaterials.scroll(e)
			}
		}
	}
</script>

<style scoped lang="less">
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
